<route>{ index: 1, title: '工具函数' }</route>

<template>
  <h1>Utils 工具函数</h1>

  <h2>FormatTime 时间格式化</h2>
  <table-info type="param" :data="formatTimeTable"></table-info>
  <h2>案例</h2>
  <code-demo :code="formatTimeCode"></code-demo>

  <h2>FormatAmount 金额格式化</h2>
  <p>通过 Number.prototype.toLocaleString 实现。</p>
  <table-info type="param" :data="formatAmountTable"></table-info>
  <h2>案例</h2>
  <code-demo :code="formatAmountCode"></code-demo>
</template>

<script setup>
import { formatTime, formatAmount } from 'ui-lib/utils'

const formatTimeTable = [
  {
    name: '第一个参数',
    desc: 'Date类型的数据，或能被Date函数处理的字符串',
    type: 'Date, string',
  },
  {
    name: '第二个参数',
    desc: '格式化字符串，如"yyyy-MM-dd hh:mm:ss"',
    type: 'string',
  },
]

// prettier-ignore
const formatTimeCode = `import { formatTime } from 'ui-lib/utils'

formatTime(new Date(), 'yyyy-MM-dd hh:mm:ss') // ${formatTime(new Date(), 'yyyy-MM-dd hh:mm:ss')}
formatTime('2022-10-30 12:20:12', 'yyyy-MM-dd') // ${formatTime('2022-10-30 12:20:12', 'yyyy-MM-dd')}
`
const formatAmountTable = [
  {
    name: '第一个参数',
    desc: '需要处理的数字或能被Number函数处理的字符串，否则返回此参数的值',
    type: 'number, string',
  },
  {
    name: '第二个参数',
    desc: '保留的小数位',
    type: 'number',
  },
  {
    name: '第三个参数',
    desc: '是否显示千分位',
    type: 'boolean',
  },
]

// prettier-ignore
const formatAmountCode = `import { formatAmount } from 'ui-lib/utils'

formatAmount(123456.334455) // ${formatAmount(123456.334455)}
formatAmount(123456.334455, 2) // ${formatAmount(123456.334455, 2)}
formatAmount(123456.334455, 2, true) // ${formatAmount(123456.334455, 2, true)}
formatAmount(123456.334455, null, true) // ${formatAmount(123456.334455, null, true)}
formatAmount('A') // ${formatAmount('A')}
formatAmount(null) // ${formatAmount(null)}
`
</script>
